<template>
  <div class="popo_color_picker">
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <!-- <div :class="'color_reveal ' + opt.size" ref="reveal"> -->
      <el-color-picker ref="input" v-model="mvalue" v-bind="opt" @active-change="colorActiveChange"></el-color-picker>
      <span class="color_values">{{mvalue}}</span>
      <!-- </div> -->
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign } from "../../utils/common";
  import Required from "../validMixins/Required";

  export default {
    name: "PopoColorPicker",
    props: {
      value: { type: String, default: "rgba( 255, 255, 255, 1)" },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [Required],
    data() {
      return {
        mvalue: this.value,
        opt: {},
      };
    },
    watch: {
      mvalue(val) {
        this.$emit("input", val);
      },
    },
    mounted() {
      // this.$refs.reveal.style.backgroundColor = this.mvalue;
    },
    created() {
      // console.log( "input", this);
      var opt = objectAssign(
        {
          showAlpha: this.item.showAlpha !== undefined ? this.item.showAlpha : true,
          colorFormat: this.item.colorFormat !== undefined ? this.item.colorFormat : "rgb",
          // size: this.item.size ? this.item.size : "small",
        },
        this.item.props
      );

      opt.size = !!opt.size ? opt.size : "small";

      this.opt = opt;
    },
    methods: {
      colorActiveChange(color) {
        // this.$refs.reveal.style.backgroundColor = color;
        // console.log( "colorActiveChange", arguments);
      },
    },
  };
</script>

<style scoped lang="scss">
::v-deep {
  .popo_color_picker .el-color-picker {
    margin-top: -1px;
    margin-bottom: -1px;
    margin-right: -1px;
    background: rgba(255, 255, 255, 0.4);
  }
  .popo_color_picker .el-color-picker__trigger {
    width: 100px;
    text-align: right;
  }
  .popo_color_picker .el-color-picker__icon {
    width: 30px;
    text-align: right;
    transform: translate3d(0%, -50%, 0) scale(0.8);
    left: auto;
    right: 10%;
  }
  .popo_color_picker .el-icon-arrow-down:before {
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
  }
}
.color_reveal {
  display: inline-block;
  width: 80px;
  height: 40px;
  vertical-align: normal;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  text-align: right;
}
.color_reveal.medium {
  height: 36px;
}
.color_reveal.small {
  height: 32px;
}
.color_reveal.mini {
  height: 28px;
}

.color_values {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  vertical-align: top;
}
</style>
